import { IconKey } from '@/types';
import { getIcon } from '@/utils';
import { useState } from 'react';

export type TOption = { value: string; icon: IconKey; label: string };

type Props = {
   value: string;
   onChange?: (value: string) => void;
   options: Array<TOption>;
};

const RadioIconButton = ({ value, onChange, options }: Props) => {
   const [_value, setValue] = useState(value);
   const handleChange = (value) => {
      setValue(value);
      onChange && onChange(value);
   };
   let cls = 'flex items-center space-x-1 px-2 py-0.5 ';
   return (
      <div className="flex">
         {options.map((item, index) => {
            if (index === options.length - 1) {
               cls += 'border-l';
            }
            let isSelected = item.value === _value;

            return (
               <div
                  className={cls}
                  key={item.value}
                  onClick={handleChange.bind(null, item.value)}
               >
                  {getIcon(item.icon, {
                     size: 14,
                     type: isSelected ? 'primary' : 'disabled',
                  })}
                  {isSelected && (
                     <span className="color-main">{item.label}</span>
                  )}
               </div>
            );
         })}
      </div>
   );
};


export default RadioIconButton;